import { Modal, Form, Input, Select, Button, DatePicker, Row, Col } from 'antd';
import Util from '@/util/util';

const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

class ModalForm extends React.Component {

  parentMenu = () => {
    return <Option value='' key=''>全部</Option>
  }

  handelSubmit = () => {
    let fieldsValue = this.props.form.getFieldsValue();
    this.props.onOk(true, fieldsValue);
  }

  handelReset = () => {
    this.props.form.resetFields();
    this.props.onOk(false);
  }

  render() {
    const { getFieldProps } = this.props.form;
    return (
      <Modal
        title={this.props.title}
        visible={this.props.visible}
        onOk={this.handelSubmit}
        onCancel={this.handelReset}
      >
        <Form horizontal>
          <Row gutter={16}>
            <Col span="12" key={'name'}>
              <FormItem label={'菜单名'}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
              >
                <Input
                  placeholder={'请输入菜单名'}
                  {...getFieldProps('name')}
                />
              </FormItem>
            </Col>
            <Col span="12" key={'pid'}>
              <FormItem label={'所属菜单'}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
              >
                <Select
                  {...getFieldProps('pid', {
                    initialValue: ''
                  })}
                >
                  {this.parentMenu()}
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span="12" key={'path'}>
              <FormItem label={'菜单路径'}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
              >
                <Input
                  placeholder={'请输入url路径'}
                  {...getFieldProps('path')}
                />
              </FormItem>
            </Col>
            <Col span="12" key={'rank'}>
              <FormItem label={'排序'}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
              >
                <Input
                  placeholder={'请输入排序'}
                  {...getFieldProps('rank')}
                />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    )
  }
}
export default Form.create({})(ModalForm)